<template>
    <div class="mail-item" @click="handleDeatilInfo">
        <div class="header">
            <div class="header-user">
                <img :src="avtar" />
                <div class="header-user-info">
                    <div class="info-name">{{ info.fromUser }}</div>
                    <div class="info-date">{{ time }}</div>
                </div>
            </div>
            <div class="header-title">{{ info.title }}</div>
        </div>
        <div class="center">
            <div class="center-send">发件人: {{ info.fromUser }}</div>
            <div class="center-send">收件人: {{ info.toUser }}</div>
        </div>
        <!-- <div class="content">
            <MdViewer :context="info.content" />
        </div> -->
    </div>
</template>

<script>
import { formatDate } from "../utils";
import { getUserAvatar } from "../utils";
import MdViewer from "../components/MdViewer.vue";

export default {
    name: "MailItem",
    components: {
        MdViewer,
    },
    data() {
        return {
            time: formatDate(this.info.time),
            avtar: "",
        };
    },

    props: {
        info: Object,
    },

    methods: {
        handleDeatilInfo() {
            this.$emit("viewdetailinfo", this.info);
        },
    },

    mounted() {
        this.avtar = getUserAvatar(this.info.fromUser);
    },
};
</script>

<style lang="less">
.mail-item {
    width: 600px;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 10px;

    &:hover {
        box-shadow: 2px 2px 2px #eee, -2px -2px 2px #eee;
    }

    .header {
        width: 100%;
        height: 100px;
        display: flex;

        &-user {
            width: 300px;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 10px;

            img {
                width: 80px;
                height: 80px;
                object-fit: cover;
                border-radius: 50%;
            }

            &-info {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-left: 10px;
                flex: 1;

                .info-name {
                    font-size: 16px;
                }

                .info-date {
                    font-size: 12px;
                    color: #aaa;
                }
            }
        }

        &-title {
            flex: 1;
            font-size: 24px;
            line-height: 100px;
        }
    }

    .center {
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
        &-send {
            color: #ccc;
            font-size: 12px;
        }
    }
    .content {
        height: 100%;
        // border-top: 1px solid #aaa;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        // text-overflow: ellipsis;
        // filter: blur(2px);
    }

    .content::before {
        content: "";
        display: block;
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        // opacity: 0.9;
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(1px);
        // background-image: linear-gradient(to top, #444 0%, #fff 100%);
    }
}
</style>